<template>
    <div class="header-content">
        <div style="display: grid;grid-template-columns: 1fr 1fr;">
            <div class="trail-query-content">
                <el-form
                    id="header-query"
                    style="border:1px solid #eceaea;padding:2px 6px;"
                    label-width="110px"
                    ref="searchParam"
                    :model="searchParam"
                >
                    <el-form-item label="产品代码/名称" prop="fundCode">
                        <RiskEntryInput @set-entry-data="getAccountDebarValue" :returnDatas="searchParam.fundCode" />
                    </el-form-item>
                    <el-form-item label="证券代码/名称" prop="stockCode">
                        <el-select
                            v-model="searchParam.stockCode"
                            filterable
                            clearable
                            remote
                            :remote-method="getStockCodeList"
                            @clear="getStockCodeList('')"
                            @visible-change="handleStockVisibleChange"
                            :loading="selectLoading"
                            size="mini"
                            style="width:100%"
                        >
                            <el-option
                                v-for="item in stockCodes"
                                :key="item.dictKey"
                                :label="item.dictKey + ' ' + item.dictKeyName"
                                :value="item.dictKey"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="存款银行" prop="bankCode">
                        <el-select
                            v-model="searchParam.bankCode"
                            filterable
                            clearable
                            remote
                            :remote-method="getBankCodeList"
                            @clear="getBankCodeList('')"
                            @visible-change="handleBankVisibleChange"
                            :loading="selectLoading"
                            size="mini"
                            style="width:100%"
                        >
                            <el-option
                                v-for="item in bankCodeTypes"
                                :key="item.dictKey"
                                :label="item.dictKey + ' ' + item.dictKeyName"
                                :value="item.dictKey"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="交易对手" prop="opponentCode">
                        <el-select
                            v-model="searchParam.opponentCode"
                            size="mini"
                            filterable
                            clearable
                            remote
                            :remote-method="getOpponentCodeList"
                            @clear="getOpponentCodeList('')"
                            @visible-change="handleOpponentVisibleChange"
                            :loading="selectLoading"
                            style="width:100%"
                        >
                            <el-option
                                v-for="item in opponentCodeTypes"
                                :key="item.dictKey"
                                :label="item.dictKey + ' ' + item.dictKeyName"
                                :value="item.dictKey"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>

                <div style="height:75px">
                    <el-checkbox-group
                        v-model="trialTypes"
                        @change="handlecheckTrailParamsChange"
                        size="medium"
                        class="set-checkbox"
                        v-show="!noData"
                    >
                        <el-checkbox v-for="(value, key) in trailTypeOptions" :label="value" :key="value + checkBoxKey">{{ key }}</el-checkbox>
                    </el-checkbox-group>
                </div>
                <div style="text-align:right">
                    <el-button @click="handleReset">重置</el-button>
                    <el-button type="primary" @click="handleTrail">试算</el-button>
                </div>
            </div>
            <div class="trail-query-content">
                <span class="set-bold">
                    证券信息
                </span>
                <span style="margin:0 90px"> 证券类别：{{ stockInfo.stockTypeName }} </span>
                <span> 上市天数：{{ stockInfo.stListDays }} </span>

                <div style="border:1px solid #eceaea;padding:2px 6px;margin-top:6px;height:172px;overflow:auto">
                    <div id="header-query" style="row-gap: 8px;">
                        <span v-for="(value, key) in stockInfoParams" :key="key">
                            {{ value }}: <span style="margin-left:10px"> {{ noData ? '' : stockInfo[key] || '--' }}</span>
                        </span>
                    </div>
                    <div v-for="(value, key) in stockInfoParamsOther" :key="key" style="margin-top:8px">
                        {{ value }}: <span style="margin-left:10px"> {{ noData ? '' : stockInfo[key] || '--' }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import RiskEntryInput from '@/common/components/risk-entry-input.vue';
import { Component, Vue, Prop, Emit, Watch } from 'vue-property-decorator';

@Component({
    name: 'RelationTransactionQueryCondition',
    components: { RiskEntryInput },
})
export default class RelationTransactionQueryCondition extends Vue {
    @Prop() searchParam: any;
    selectLoading: boolean = false;
    trailTypeOptions: any = {};
    trailTypeOptionsTemp: any = {
        '发行人 ': '1',
        '承销商 ': '2',
        '财务顾问 ': '3',
        '发行人股东(5%以上)': '4',
        '发行人董监高 ': '5',
        '投标机构 ': '6',
        '原始权益人 ': '7',
        '管理人 ': '8',
    };

    stockInfoParams = {
        issueName: '证券发行人',
        financialAdviser: '财务顾问',
        mainIssueName: '主承销商',
        custodian: '管理人',
        jointIssueName: '联席主承销商',
        biddingAgency: '投标机构',
        originalHolderName: '原始权益人',
    };
    stockInfoParamsOther = {
        leaderNames: '发行人董监高',
        shareholders: '发行人股东（5%以上）',
    };

    stockInfo: any = {}; // 实际证券信息
    noData: boolean = true; // 证券信息无数据
    trialTypes: any[] = [];

    stockCodes: any[] = []; // 证券代码

    bankCodeTypes: any[] = [];

    opponentCodeTypes: any[] = [];

    @Watch('searchParam.stockCode')
    watchStockCode() {
        if (this.searchParam.stockCode) {
            this.noData = false;
            this.yh_message_info('默认的检查项需要勾选，其他项未勾选，可对已勾选（未勾选）项做取消勾选（进行勾选）处理');
        } else {
            this.noData = true;
        }
        this.$axios
            .post('/componyPool/issueGroup/trail/findStockInfo', { stockCode: this.searchParam.stockCode })
            .then((res: any) => {
                this.stockInfo = res;
                const temp = (res && res.trialTypes && res.trialTypes.split(',')) || [];
                this.trialTypes = temp;
                if (temp.length) {
                    this.handlecheckTrailParamsChange();
                } else {
                    this.trailTypeOptions = JSON.parse(JSON.stringify(this.trailTypeOptionsTemp));
                }
            })
            .catch(err => {
                console.log(err, 'err');
            });
    }

    async mounted() {
        this.trailTypeOptions = JSON.parse(JSON.stringify(this.trailTypeOptionsTemp));
        await this.getStockCodeList('');
        await this.getOpponentCodeList('');
        // 存款银行
        await this.getBankCodeList('');
    }

    // 试算
    handleTrail() {
        if (!this.searchParam.stockCode && !this.searchParam.bankCode && !this.searchParam.opponentCode) {
            this.yh_message_info('证券代码/名称、银行存款、交易对手至少填其中一项');
        } else {
            this.$emit('handleTrail', { searchParam: this.searchParam, stockInfo: this.stockInfo, trialTypes: this.trialTypes });
        }
    }

    // 重置
    handleReset() {
        (this.$refs.searchParam as any).resetFields();
        this.noData = true;
        this.stockInfo = {};
        this.trialTypes = [];
    }

    // 证券代码下拉值
    getStockCodeList(e: string) {
        this.selectLoading = true;
        return new Promise((resolve, reject) => {
            this.$axios
                .post('/dict/stock/select', {
                    dictKey: e,
                    dictKeyName: e,
                })
                .then((res: any) => {
                    this.stockCodes = res;
                    this.selectLoading = false;
                    resolve(res);
                })
                .catch(err => {
                    this.selectLoading = false;
                    reject(err);
                });
        });
    }

    // 存款银行
    getBankCodeList(e) {
        this.selectLoading = true;
        return new Promise((resolve, reject) => {
            this.$axios
                .post('/dict/bank/select', {
                    dictKey: e,
                    dictKeyName: e,
                })
                .then((res: any) => {
                    this.bankCodeTypes = res;
                    this.selectLoading = false;
                    resolve(res);
                })
                .catch(err => {
                    this.selectLoading = false;
                    reject(err);
                });
        });
    }

    // 交易对手方
    getOpponentCodeList(e: string) {
        this.selectLoading = true;
        return new Promise((resolve, reject) => {
            this.$axios
                .post('/dict/opponent/select', {
                    dictKey: e,
                    dictKeyName: e,
                })
                .then((res: any) => {
                    this.opponentCodeTypes = res;
                    this.selectLoading = false;
                    resolve(res);
                })
                .catch(err => {
                    this.selectLoading = false;
                    reject(err);
                });
        });
    }

    // 交易对手方
    async handleOpponentVisibleChange(isShow: boolean) {
        if (!isShow && this.opponentCodeTypes.length < 1) {
            await this.getOpponentCodeList('');
        }
    }

    // 银行
    async handleBankVisibleChange(isShow: boolean) {
        if (!isShow && this.bankCodeTypes.length < 1) {
            await this.getBankCodeList('');
        }
    }

    // 证券代码
    async handleStockVisibleChange(isShow: boolean) {
        if (!isShow && this.stockCodes.length < 1) {
            await this.getStockCodeList('');
        }
    }

    // 产品代码
    getAccountDebarValue(val: any) {
        this.searchParam.fundCode = val;
    }

    // 匹配项校验方
    handlecheckTrailParamsChange() {
        let obj1 = {};
        let obj2 = {};
        for (let key in this.trailTypeOptions) {
            const value = this.trailTypeOptions[key];
            if (this.trialTypes.includes(value)) {
                obj1[key] = value;
            } else {
                obj2[key] = value;
            }
        }
        this.trailTypeOptions = {
            ...obj1,
            ...obj2,
        };
    }
}
</script>
<style lang="scss" scoped>
.header-content {
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    padding: 15px 10px 15px 0;
    background-color: #fff;
}
#header-query {
    display: grid;
    grid-template-columns: 1fr 1fr;

    /deep/ .el-form-item {
        margin-bottom: 0px;
        .el-form-item__label {
            color: black;
            padding-right: 2px;
        }
    }
}
.trail-query-content {
    border: 1px solid #eceaea;
    padding: 6px;
    margin-left: 4px;
}
.set-bold {
    font-weight: bolder;
}

/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light {
    display: flex;
    align-items: center;
    width: 65%;
    max-width: fit-content;
    padding-right: 5px;
    padding-left: 0px;
    margin: 2px 0 2px 2px;
    .el-select__tags-text {
        display: inline-block;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
/deep/ .el-select__tags {
    flex-wrap: nowrap;
}
.set-checkbox {
    padding: 6px;
    border: 1px solid #eceaea;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 10px;
    margin: 5px 0px;
}
/deep/ .el-checkbox {
    margin-right: 10px;
}
</style>
